<template>
    <div class="todo-input">
        <input type="text" placeholder="what need to be done" autofocus
            v-on:keyup.enter="enterKeyup($event)"/>
    </div>
</template>

<script>
export default {
    name: 'TodoInput',
    methods: {
        enterKeyup: function (event) {
            if (event.target.value === "") {
                this.$store.dispatch('addMessage', {
                    msg: 'Todo can\'t be Empty!'
                });
                return;
            }
            this.$store.dispatch('addTodo', event.target.value);
            event.target.value = '';
        }
    }
}
</script>

<style lang="less">
.todo-input {
    input[type=text] {
        border: none;
        width: 100%;
        box-sizing: border-box;
        font-size: 24px;
        padding: 15px 15px 15px 65px;
        outline: none;
    }

    input::-moz-placeholder{
        color: #D4D4D4;
    }
    input::-webkit-input-placeholder {
        color: #D4D4D4;
    }
}
</style>
